<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>购物车</title>
<link rel="stylesheet" type="text/css" href="css/lib/swiper.min.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/doumee.css"/>
<link rel="stylesheet" type="text/css" href="css/public.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/dialog.css"/>
<link rel="stylesheet" type="text/css" href="css/active.css"/>
<link rel="stylesheet" type="text/css" href="css/shopCar.css"/>
<script src="js/lib/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/doumee.js" type="text/javascript" charset="utf-8"></script>
<script src="js/operate.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/dialog.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

<header class="header bottom-line main-line" id="shopHead">
	<div class="allCheck dm-left">
		<label><input type="checkbox" />全选</label>
	</div>
	<a class="right_icon" onclick="empty()">清空</a>
</header>

<footer class="footer top-line main-line flex-row" id="bottomBtn">
	<div class="txt tl flex-full">合计：￥<span id="totalVal">0.00</span></div>
	<a class="btn" href="enterOrder.html">去结算</a>
</footer>

<div class="swiper-container Main" id="Main">
	<div class="swiper-wrapper">
		<div class="swiper-slide content">
			
			<div class="children" id="shopCar">
				
				<div class="shopMod bg-w">
					<ul class="shopBox bottom-line flex-row">
						<li class="singleCheck">
							<input type="checkbox" />
						</li>
						<li class="photo cover">
							<img src="image/test/pro-1.png" />
						</li>
						<li class="info flex-full">
							<ol class="name-box flex-row">
								<li class="name-l flex-full">
									<h5 class="name">这里是商品名称这里是商品名称这里是商品名称</h5>
									<h6 class="spec">红色;12寸;微辣</h6>
								</li>
								<li class="name-r">
									<a class="del" onclick="delPro(this)">删除</a>
								</li>
							</ol>
							<ol class="val-box dm-clearfix">
								<li class="val dm-left">￥<span class="singleVal">1200.00</span></li>
								<li class="box flex-row dm-right">
									<ul class="operate flex-row">
										<li class="btn reduce"></li>
										<li class="num">1</li>
										<li class="btn add"></li>
									</ul>
								</li>
							</ol>
						</li>
					</ul>
				</div>
				
			</div>
			
		</div>
	</div>
</div>

<script type="text/javascript">

new copy('#shopCar',8).data();
	
pullSwiper('#Main');

//全选/取消全选
$('.allCheck input').click(function(e){
	var statu = e.currentTarget.checked;
	$(".singleCheck input").prop('checked',statu);
	getAllVal();
});

//单选
$(".singleCheck input").change(function(){
	//获取总数
	var all = $(".singleCheck").length;
	//已选中数量
	var sel = 0;
	$(".singleCheck").each(function(){
		var target = $(this);
		if(target.find('input').prop('checked')){
			sel++;
		};
	});
	
	if(sel==all){
		$('.allCheck input').prop('checked',true);
	}else{
		$('.allCheck input').prop('checked',false);
	};
	
	getAllVal();
});

//合计
function getAllVal(){
	var total = 0;
	$(".singleCheck").each(function(){
		var target = $(this);
		if(target.find('input').prop('checked')){
			var val = target.parents('.shopBox').find('.singleVal').text();
			var num = target.parents('.shopBox').find('.num').text();
			total = total + parseFloat(val)*num;
		};
	});
	$('#totalVal').text(total.toFixed(2));
};

//删除商品
function delPro(obj){
	var target = $(obj).parents('.shopBox');
	dmAlert('确定要删除该商品',{
		success:function(){
			target.remove();
			tip('删除成功');
		},
	});
};

//清空
function empty(){
	dmAlert('确定要清除全部商品',{
		success:function(){
			location.replace('shopCar_empty.html');
		},
	});
};

</script>

</body>
</html>
